import { Text, View } from '@tarojs/components';
import React, { useEffect, useMemo, useState } from 'react';

type shows = {
    dur: number; // 电影时长
    shows: {
        showDate: string; // 上映日期
        plist: {
            discountSellPrice: string; // 售票价;
            dt: string; // 场次时间;
            lang: string; // 语言;
            th: string; // 放映厅;
            tm: string; // 开场时间;
            tp: string; // 放映类型2D/3D;
            vipPrice: string; // 会员价;
            vipPriceName: string; // 会员价名称;
        }[];//上映场次;  
    }[];
};

const DaysDetailCard = ({ plist, dur }) => {

    const { discountSellPrice, dt, lang, th, tm, tp, vipPrice, vipPriceName } = plist;
    console.log("plist", plist);
    const [movieEndTime, setMovieEndTime] = useState("");
    useEffect(() => {
        if (tm) {
            setMovieEndTime(Number(tm.split(":")[0]) + Math.floor((Number(tm.split(":")[1]) + dur) / 60) + ":" + (Number(tm.split(":")[1]) + dur) % 60);
        }
    }, []);
    if (plist === undefined) {
        return;
    }

    return (
        <View className='DaysDetailCardContainer'>
            <View className='DaysDetailCardContainer-time'>
                <Text>{tm}</Text>
                <Text className='DaysDetailCardContainer-smText'>{movieEndTime}散场</Text>
            </View>
            <View className='DaysDetailCardContainer-items'>
                <Text>{lang} {tp}</Text>
                <Text className='DaysDetailCardContainer-smText'>{th}</Text>
            </View>
            <View className='DaysDetailCardContainer-price'>
                <Text style={{ color: "red" }}><Text style={{ fontSize: "10px" }}>￥</Text>{discountSellPrice}</Text>
            </View>

        </View >
    );
};



const MovieDateBar = ({ shows, dur }: shows) => {
    console.log(shows);
    const [isActive, setIsActive] = useState(0);
    //切换卡片时，初始化
    useEffect(() => {
        setIsActive(0);
        document.documentElement.style.setProperty('--array-active', String(0));
    }, [shows]);

    const handleClick = (index: number) => {
        setIsActive(index);
        document.documentElement.style.setProperty('--array-active', String(index));
    };
    return (
        <>
            <View className='MovieDataBarContainer'>
                {shows && shows.map((item, index) => <View onClick={() => handleClick(index)} className={`MovieDataBarContainer-item ${isActive === index ? "active" : ""}`} key={index}>{item.showDate}</View>
                )}
                <Text className='decoration'></Text>
            </View>
            <View className='daysDetailContainer'>
                {shows[isActive] !== undefined && shows[isActive].plist.map((item, index) => <DaysDetailCard key={index} plist={item} dur={dur} />)}
                {shows[isActive] !== undefined && shows[isActive].plist.length === 0 && <View > 暂无场次数据</View>}
            </View >
        </>
    );
};

export default MovieDateBar;
